<template>
  <div class="SearchList" v-loading='loading'>
    <div class="network-recruitment">
      <div class="topo-head row aic" v-if="searchSelectValue && searchSelectValue=='0'">
        <div class="title">网络招聘会</div>
        <i class="iconfont icon-earth" style="color: red; font-size: 18px;"></i>
      </div>
      <div class="topo-head row aic" v-if="searchSelectValue && searchSelectValue=='1'">
        <div class="title">职位搜索</div>
        <i class="iconfont icon-zuixin-" style="color: red;"></i>
      </div>

       <div class="message-list" v-if="searchSelectValue && searchSelectValue=='0'">
         <NoneAbout :list="data !== null && data.rows" text="招聘会"></NoneAbout>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in data !== null && data.rows" :key="item.id">
            <!-- <el-card shadow="hover">
              
              <div class="recruitment-msg">
                <img src="https://element.eleme.io/static/hamburger.50e4091.png" class="image">
                <div class="job-fair-message row aic">
                  <div class="flex-grow-1">
                    <div class="title">{{item.jobFairName}}</div>
                    <div class="time">时间：{{item.startTime}} 至 {{item.endTime}}</div>
                  </div>
                  <el-button style="height: 33px;" type="primary" size="small">进入会场</el-button>
                </div>
              </div>
            </el-card> -->
            <JobFair :item="item"></JobFair>
          </el-col>
        </el-row>
        
      </div>

      <div class="message-list" v-if="searchSelectValue && searchSelectValue=='1'">
        <NoneAbout :list="data !== null && data.rows" text="职位"></NoneAbout>
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in data !== null && data.rows && data.rows" :key="item.id">
            <el-card shadow="hover">
              <div class="recruitment-msg cursor" @click="toDetail(item.jobId)">
                <div class="title row aic">
                  <p class="flex-grow-1">{{item.posName}}</p>
                  <div>{{item.salary}}</div>
                </div>
                <div class="label">
                  <span>{{item.posArea}}</span>
                  <span v-if="item.experience==0">工作经验不限</span>
                  <span v-if="item.experience!==0">工作经验{{item.experience}}年</span>
                  <span v-if="item.education == 0">小学</span>
                  <span v-if="item.education == 1">初中</span>
                  <span v-if="item.education == 2">高中</span>
                  <span v-if="item.education == 3">大专</span>
                  <span v-if="item.education == 4">本科</span>
                  <span v-if="item.education == 5">硕士</span>
                  <span v-if="item.education == 6">博士</span>
                  <span v-if="item.education == 7">学历不限</span>
                </div>
                <div class="position">{{item.address}}</div>
                <div class="company">{{item.posNature}} | {{item.level}}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
         
      </div>
    </div>
    <div class="block text-center">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="8"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import JobFair from '@/components/JobFair.vue'
import NoneAbout from '@/components/NoneAbout.vue'
export default {
  methods:{
    async init(page=this.page){
      this.loading = true;
      switch (this.searchSelectValue) {
        case '0': {
          let _data = {
            pageSize: this.number, 
            pageNumber: page, 
            keyword: this.searchValue, 
            status: ['1', '2', '3'],
            param3: localStorage.getItem("city")? localStorage.getItem("city") :this.$store.state.home.city }
            
            let res = await this.$store.dispatch('getjobFairList',_data);
            this.data = res.page;
            this.total = this.data.total;
            console.log(res)
            setTimeout(()=>{
              this.loading = false;
            },500);
        }
          // let _data = {
          //   pageSize: 6, 
          //   pageNumber: 1, 
          //   type: 1, 
          //   keyword: '',
          //   auditStatus: "1",
          //   display: "1", 
          //   param3: localStorage.getItem("city")? localStorage.getItem("city") :this.$store.state.home.city
          // }
          
            
          break;
        
        case '1': {
            let _data = {
              pageSize: this.number, 
              pageNumber: page, 
              keyword: this.searchValue, 
              auditStatus: "1",
              display: "1", 
              param3: localStorage.getItem("city")? localStorage.getItem("city") :this.$store.state.home.city 
            }
            
            let res = await this.$store.dispatch('getPositionList',_data);
            this.data = res.page;
            this.total = this.data.total;
            console.log(res)
            setTimeout(()=>{
              this.loading = false;
            },500);
          }
          
          break;
      
        default:
          break;
      }
    },
    handleCurrentChange(page){
      this.page = page;
      this.init();
    },

    toDetail(id){
      console.log(id)
      this.$router.push({path: `/position/${id}`})
    }
  },
  mounted(){
    console.log(this.$route)
    this.init();
  },
  data(){
    return {
      searchSelectValue: this.$route.params.searchSelectValue? this.$route.params.searchSelectValue: false,
      searchValue: this.$route.params.searchValue? this.$route.params.searchValue: false,
      page: 1,
      number: 8,
      data: null,
      loading: false,
      total: 0,
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal){
        this.searchSelectValue = val.params.searchSelectValue;
        this.searchValue = val.params.searchValue;
        this.init();
        console.log(val);
      },
      // 深度观察监听
      deep: true
    }
  },
  components:{
    JobFair,
    NoneAbout,
  }
}
</script>

<style lang="less">
.SearchList {
  
}
</style>
